<template>
  <el-container class="box">
    <el-header class="search">
      <el-row>
        <el-col :span="5">
          <div class="num">
            <span>工单编号:</span>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              clearable
              class="numinput"
            >
            </el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <span>工单状态:</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1">
          <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          ></el-col
        >
      </el-row>
    </el-header>
    <el-container>
      <el-header class="header">
        <el-row>
          <el-col :span="1">
            <el-button
              type="primary"
              icon="el-icon-circle-plus-outline"
              class="btn"
              @click="openAdd(1,2)"
              >新建</el-button
            >
          </el-col>
          <el-col :span="2">
            <el-button class="btn2" type="primary" @click="openWarnningDialog"
              >工单配置</el-button
            >
          </el-col>
          <addDialog
            v-if="isShow"
            :isShow.sync="isShow"
            :editInfo="editInfo"
            :flag="flag"
          ></addDialog>
        </el-row>
      </el-header>
      <el-main class="main">
        <el-table
          ref="table"
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="taskCode" label="工单编号" width="200">
          </el-table-column>
          <el-table-column prop="innerCode" label="设备编号" width="200">
          </el-table-column>
          <el-table-column
            prop="productTypeId"
            label="工单类型"
            width="200"
            :formatter="judgeGdType"
          >
          </el-table-column>
          <el-table-column
            prop="createType"
            label="工单方式"
            width="120"
            :formatter="judgeCreateType"
          >
          </el-table-column>
          <el-table-column
            prop="taskStatusTypeEntity.statusName"
            label="工单状态"
            width="170"
          >
          </el-table-column>
          <el-table-column prop="userName" label="运维人员" width="200">
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" width="200">
          </el-table-column>
          <el-table-column prop="date" label="操作" width="100">
            <template #default="{ row }">
              <span class="seedetial" @click="seeDetial(row, 1)">查看详情</span>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="page" type="flex">
          <el-col :span="2">共{{ pageInfo.totalCount }}条记录</el-col>
          <el-col :span="2"
            >第 {{ pageInfo.pageIndex + '/' + pageInfo.totalPage }} 页</el-col
          >
          <el-col :span="16"></el-col>
          <el-col :span="2"
            ><button :disabled="params.pageIndex === 1" @click="changePage(1)">
              上一页
            </button></el-col
          >
          <el-col :span="2"
            ><button @click="changePage(2)">下一页</button></el-col
          >
        </el-row>
        <detialDialog
          :dialogTableVisible.sync="dialogTableVisible"
          :detail="detail"
          @openAdd="openAdd(1)"
          @cancel="getRepireGdInfo"
          :flag="flag"
        ></detialDialog>
      </el-main>
    </el-container>
    <warnDialog ref="warnDialog" @flash="getRepireGdInfo"></warnDialog>
  </el-container>
</template>

<script>
import addDialog from './compomemts/addDialog.vue'
import detialDialog from './compomemts/detialDialog.vue'
import judgeGdType from '@/Enums/gdStatus'
import { searchGd } from '@/api/gdInfo'
import warnDialog from './compomemts/warnDialog.vue'
export default {
  name: 'Dkd2Yunwei',
  components: {
    detialDialog,
    addDialog,
    warnDialog
  },
  data () {
    return {
      input: '',
      options: [
        {
          value: 1,
          label: '代办'
        },
        {
          value: 2,
          label: '进行'
        },
        {
          value: 3,
          label: '取消'
        },
        {
          value: 4,
          label: '完成'
        }
      ],
      value: '',
      detail: {},
      dialogTableVisible: false,
      isShow: false,
      loading: {
        type: Boolean,
        default: false
      },
      params: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false
      },
      pageInfo: {},
      currentPage4: 4,
      tableData: [],
      visible: false,
      media: {},
      editInfo: {},
      flag: 0
    }
  },

  mounted () {
    this.getRepireGdInfo()
  },

  methods: {
    seeDetial (val, num) {
      // console.log(num)
      this.flag = num
      // console.log(val)
      this.detail = { ...val }
      // console.log(this.detail)
      this.media = val
      this.dialogTableVisible = true
    },

    async getRepireGdInfo () {
      this.loading = true
      const res = await searchGd(this.params)
      this.pageInfo = res
      this.tableData = res.currentPageRecords
      this.tableData.forEach((ele) => {
        ele.createTime = this.dateFomater(ele.createTime)
      })
      this.loading = false
    },
    async changePage (val) {
      val === 1 ? (this.params.pageIndex -= 1) : (this.params.pageIndex += 1)
      this.getRepireGdInfo()
    },
    dateFomater (inputDate) {
      const date = new Date(inputDate)
      const formattedDate = `${date.getFullYear()}.${(date.getMonth() + 1)
        .toString()
        .padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')} ${date
        .getHours()
        .toString()
        .padStart(2, '0')}:${date
        .getMinutes()
        .toString()
        .padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
      // console.log(formattedDate)
      return formattedDate
    },
    openAdd (val, val2) {
      if (val2) {
        this.editInfo = {}
      } else {
        this.editInfo = this.media
      }
      this.flag = val
      this.isShow = true
    },

    judgeGdType (row, column, cellValue, index) {
      const obj = judgeGdType.gdType.find((item) => item.id === cellValue)
      return obj ? obj.value : '未知工单'
      /* if (obj) {
        console.log(obj)
        return obj.value
      } */
    },
    judgeCreateType (row, column, cellValue, index) {
      const obj = judgeGdType.createType.find((item) => item.id === cellValue)
      return obj ? obj.value : '未知类型'
    },
    search () {
      this.input && (this.params.taskCode = this.input)
      this.value && (this.params.status = this.value)
      this.getRepireGdInfo()
      delete this.params.taskCode
      delete this.params.status
      // console.log(res)
    },
    openWarnningDialog () {
      this.$refs.warnDialog.dialogVisible = true
      this.$refs.warnDialog.getSupplyAlertValue()
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  background-color: #e9eef3;
  min-height: 671px;
  .header {
    background-color: #fff;
    padding-left: 10px;
    line-height: 60px;
    margin-bottom: 0px;
    .btn {
      border: none;
      background: linear-gradient(135deg, #ff903f, #ff6122) !important;

      &:hover {
        background: linear-gradient(135deg, #ff7d43, #db3602) !important;
      }
    }
    .btn2 {
      color: #333;
      border: none;
      background: linear-gradient(135deg, #fbf4f0, #fbf4f0) !important;

      &:hover {
        background: linear-gradient(135deg, #f3e7e1, #f3e7e1) !important;
      }
    }
  }
  .main {
    padding: 0;
    padding-bottom: 80px;
    position: relative;
    width: 100%;
    background-color: #fff;
    height: 100%;
    .el-table {
      .seedetial {
        cursor: pointer;
        color: #597ef9;
      }
      // background-color: #e20808;
      // height: 495px !important;
      .el-table .cell {
        font-size: 12px;
      }
    }
    .page {
      width: 32px;
      width: 1500px;
      position: absolute;
      bottom: 10px;
      button {
        cursor: pointer;
        width: 70px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        background-color: #d5ddf8;
        border: none;
      }
    }
  }
  .el-table tr {
    background-color: #a19e9e;
  }
}
.el-header {
  line-height: 60px;
  // background-color: red;
  padding: 0;
  margin-bottom: 20px;
}
.num {
  display: flex;
  align-items: center;
  span {
    width: 40%;
  }
  .numinput {
    height: 40px;
    line-height: 40px;
  }
}
.search {
  background-color: #fff;
}
</style>
